<template>
  <div class="bg-gray-50 h-screen">
    <!-- 课程封面区域 -->
    <div class="h-48 bg-[#4CAF50] flex items-center justify-center">
      <div class="w-screen h-48 relative">
        <img
          :src="store.courseData.subjectVideoImg || coverImage"
          alt="Course Cover"
          class="w-full h-full object-cover"
        />
        <div class="absolute inset-0 flex items-center justify-center">
          <van-icon
            name="play-circle-o"
            size="48"
            class="text-white opacity-80"
          />
        </div>
      </div>
    </div>

    <!-- 课程信息区域 -->
    <div class="px-4 mt-6">
      <div class="bg-white rounded-xl shadow-sm p-4">
        <!-- 课程标题 -->
        <h2 class="text-2xl font-bold text-gray-800 mb-2">
          {{ store.courseData.title }}
        </h2>

        <!-- 即将开始提示 -->
        <div class="flex items-center mb-2">
          <van-tag type="success" class="!mr-2">即将开始</van-tag>
          <span class="text-gray-500 text-sm"
            >{{ countdownStore.startTime }} 开始</span
          >
        </div>

        <!-- 倒计时展示 -->
        <div class="flex justify-center items-center py-4">
          <div class="text-center">
            <div class="text-4xl font-mono font-bold text-[#4CAF50]">
              {{ countdownStore.formattedDays }}天
            </div>
            <!-- <div class="text-gray-500 text-sm">Days</div> -->
          </div>
          <div class="text-3xl mx-2">:</div>
          <div class="text-center">
            <div class="text-4xl font-mono font-bold text-gray-800">
              {{ countdownStore.formattedHours }}:{{
                countdownStore.formattedMinutes
              }}:{{ countdownStore.formattedSeconds }}
            </div>
            <!-- <div class="text-gray-500 text-sm">HH:MM:SS</div> -->
          </div>
        </div>

        <!-- 辅助提示 -->
        <div class="text-center text-gray-400 text-sm mt-4">
          课程即将开始，请提前做好准备
        </div>
      </div>
    </div>
    <WeatherCover :imgSrc="store.courseData?.transitionImg" />
  </div>
</template>

<script setup lang="ts">
import coverImage from "@/assets/cover_course.jpg";
import { useCourseCountdown, useCourseData } from "../../store/useCourse";
import { onMounted, watch } from "vue";
import { showLoadingToast, closeToast } from "vant";
import WeatherCover from "@/components/WeatherCover.vue";

onMounted(() => {
  if (store.remainingTime == null) {
    showLoadingToast({
      message: "加载中...",
      forbidClick: true,
      duration: 0
    });
  }
});
const store = useCourseData();
// const {
//   formattedDays,
//   formattedHours,
//   formattedMinutes,
//   formattedSeconds,
//   startTime
//   // isCountdownFinished
// } = useCourseCountdown();
const countdownStore = useCourseCountdown();
watch(
  () => store.remainingTime,
  nv => {
    if (nv == 0) {
      showLoadingToast({
        message: "加载中...",
        forbidClick: true,
        duration: 0
      });
    } else {
      closeToast();
    }
  }
);
</script>

<style scoped>
/* 自定义分割线样式 */
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
}
</style>
